<template>
  <div>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/transaction">交易列表</router-link></li>
        <li><router-link to="/budgets">预算列表</router-link></li>
      </ul>
    </nav>

    <!-- 用户登录状态检查 -->
    <div v-if="userLoggedIn">
      <!-- 如果用户已登录，显示用户信息或欢迎消息 -->
      <p>欢迎，{{ username }}！</p>
      <button @click="logout">退出登录</button>
    </div>
    <div v-else>
      <!-- 如果用户未登录，显示登录/注册组件 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
data () {
  return {
    userLoggedIn: false,
    username: ''
  }
},
methods: {
  // 模拟用户登录
  login (username) {
    this.userLoggedIn = true
    this.username = username
    // 导航到交易列表页面
    this.$router.push('/transaction')
  },
  // 模拟用户退出登录
  logout () {
    this.userLoggedIn = false
    this.username = ''
    // 导航到首页
    this.$router.push('/')
  }
},
created () {
  // 在实际应用中，您可以在此处检查用户登录状态并设置userLoggedIn和username
  // 这里使用示例数据
  if (localStorage.getItem('userLoggedIn')) {
    this.userLoggedIn = true
    this.username = localStorage.getItem('username')
  }
}
}
</script>

<style scoped>
/* 样式可以根据您的设计进行调整 */
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

nav {
background-color: #4caf50;
color: white;
padding: 10px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

ul li {
display: inline;
margin-right: 20px;
}

button {
margin-top: 10px;
}

.user-info {
margin-top: 20px;
}

.welcome-message {
font-size: 18px;
font-weight: bold;
}

.logout-button {
background-color: #f44336;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}

.logout-button:hover {
background-color: #d32f2f;
}
</style>